<template>
    <div class="person">
      <h2>汽车信息：一辆奔驰车{{car.brand}}，价值{{ car.price }}元</h2>
      <button @click="changePrice">修改价格</button>
      <button @click="changeCar">修改汽车</button>
      <hr>
      <h2>当前求和为：{{ sum }}</h2>
      <button @click="changeSum">点我sum+1</button>
      <hr>
      <h2>汽车信息：一辆奔驰车{{refCar.brand}}，价值{{ refCar.price }}元</h2>
      <button @click="changeRefCar">修改汽车</button>
    </div>
</template>
  
<script lang="ts" setup name="Person">
    import { ref ,reactive} from 'vue'
    //数据
    //ref和reactive的区别
    //ref是基本数据类型的响应式数据包括基本类型和对象类型
    // reactive是对象和数组的响应式数据不包括基本类型
    let car=reactive({brand:'奔驰',price:1000000})//对象
    let refCar=ref({brand:'自行车',price:100})//对象
    //  console.log(car)
    let sum=ref(0)
    //方法
    function changePrice(){
      car.price+=100000
    }
    function changeSum(){
      sum.value++
    }
    function changeCar(){
      //reactive的对象不能直接修改，或者说修改后将失去响应式
      // car={brand:'宝马',price:2000000}  //错误的写法
      // car=reactive({brand:'宝马',price:2000000})//错误
      //正确的写法
      Object.assign(car,{brand:'宝马',price:2000000})
    }
    function changeRefCar(){
      //ref的对象可以直接修改
      refCar.value={brand:'宝马',price:2000000} //正确的写法
    }

</script>

  <style scoped>
    .person {
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
    }
    button {
      margin: 0 5px;
    }
    li {
      font-size: 20px;
    }
  </style>